<template>
  <div
    ref="headerCell"
    :style="setWidth(header)"
    @click.stop="clickHeaderCell(header)"
    :class="['m-header-cell', header.children ? 'has-children-cell':'']"
  >
    <span style="height:50px">
      <div class="text-content">
        {{ header.title }}
      </div>
      <span class="operation-icon" v-if="header.sortable && !header.children">
        <i
          :class="[
            'el-icon-caret-top',
            'sort-icon',
            sortables.props === header.sortable &&
            sortables.order === 'asc'
              ? 'active-sort-icon'
              : '',
          ]"
        ></i>
        <i
          :class="[
            'el-icon-caret-bottom',
            'sort-icon',
            sortables.props === header.sortable &&
            sortables.order === 'desc'
              ? 'active-sort-icon'
              : '',
          ]"
        ></i>
      </span>
      <vue-draggable-resizable
          v-if="!header.children && !lastHeader && header.resizable"
          class="table-draggable-handle"
          :key="header.dataIndex"
          ref="vue-draggable"
          axis="x"
          :w="5"
          :z="1"
          :x="0"
          :draggable="true"
          :resizable="false"
          @dragstop="onDragstop"
          :prevent-deactivation="true"
          @click.native.stop="()=> false"
        >
      </vue-draggable-resizable>
    </span>
    <div class="children-cell-content" v-if="header.children && header.children.length">
      <m-header-cell
        v-for="(c, index) in header.children"
        :key="index"
        :header="c"
        :sortables="sortables"
        @updateLayout="$emit('updateLayout')"
        :lastHeader="index === header.children.length-1"
      ></m-header-cell>
    </div>
  </div>
</template>

<script>
import VueDraggableResizable from './vue-draggable-resizable.vue'
export default {
  name: "MHeaderCell",
  inject: ["clickHeaderCell","setWidth"],
  components:{
    VueDraggableResizable
  },
  props: {
    header: {
      type: Object,
      required: true,
    },
    sortables:{
      type: Object,
      required: true,
    },
    lastHeader:{
      type: Boolean,
      default: () => false
    }
  },
  data(){
    return {
      minOffsetLeft: 0
    }
  },
  mounted(){
    this.calculateMinOffsetLeft()
  },
  methods:{
    calculateMinOffsetLeft(){
      this.minOffsetLeft = this.$refs.headerCell.getBoundingClientRect().width - 24 - (this.header.sortable ? this.header.title.length+1:this.header.title.length)*12
    },
    onDragstop(e){
      if(isNaN(e)) return
      if(e < 0 && Math.abs(e) > this.minOffsetLeft) e = this.minOffsetLeft
      this.header.width = this.$refs.headerCell.getBoundingClientRect().width+e
      this.$refs['vue-draggable'].left = 0
      this.$forceUpdate()
      this.$nextTick(()=>{
        this.calculateMinOffsetLeft()
      })
      this.$emit('updateLayout')
    }
  }
};
</script>

<style lang="scss" scoped>
.m-header-cell {
  height: 100%;
  padding: 0 12px;
  display: flex;
  align-items: center;
  font-weight: 600;
  border-right: 1px solid #ccc;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // white-space: nowrap;
  cursor: pointer;
  position: relative;
  > span {
    position: relative;
    display: flex;
    flex: 1;
    justify-content: space-between;
    .text-content {
      display: flex;
      align-items: center;
    }
    .operation-icon {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .sort-icon {
        color: #ccc;
        display: block;
        line-height: 8px;
      }
      .sort-icon:hover {
        color: #aaa;
      }
      .active-sort-icon {
        color: #1890ff !important;
      }
    }
    .table-draggable-handle {
      height: 100% !important;
      bottom: 0;
      left: auto !important;
      right: -12px;
      cursor: col-resize;
      touch-action: none;
      position: absolute;
      // border:2px solid red;
    }
    .table-draggable-handle:hover{
      background-color: #1890ff
    }
  }
  .children-cell-content{
    display: flex;
    .m-header-cell:last-child{
      border-right:none;
    }
  }
}
.has-children-cell{
  display: block !important;
  padding:0 !important;
  .m-header-cell{
    flex:1
  }
  >span{
    border-bottom:1px solid #ccc;
    //border-right:1px solid #ccc;
    padding:0 12px;
  }
}
</style>
